<template>
	<view class="main">
		<!-- 	<video style="width: 100%;height: 400rpx" show-loading title="视频标题"
			poster="https://mmbiz.qpic.cn/mmbiz_jpg/WMbmu2JBhCRmYJX1I5scfQdnf9gytL36ncyNpIeaw8k7D2mWKYk31AdR4XK3gUMFKDoTUfgdxhZaeZKoHML0VA/640?wx_fmt=jpeg"
			controls id="video"
			src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
			controls :enable-play-gesture="true" ref="video">
		</video> -->
		<image style="width: 100%;height: 400rpx" v-if="data.first" :src="data.first.files" mode=""></image>
		<view class="tab">
			<uni-segmented-control class="tabs" :current="index" :values="tabList" styleType="text"
				activeColor="#4DBEC1" @clickItem="changTab"></uni-segmented-control>
		</view>
		<introduce :data="data.first" :view="num" v-if="index == 0"></introduce>
		<directory v-if="index == 1" :list="data.second"></directory>
		<comments v-if="index==2" :score="data.third"></comments>
		<view class="bottom">
			<button class="btn" type="default" @click="add" v-if="index!=2 && isJoin && isShow">{{ $t('cuorse.add') }}</button>
			<button class="btn" type="default" v-if="index==2" @click="toScore">{{ $t('course.toComments') }}</button>
			<button class="btn" type="default" @click="toDetail"
				v-if="index!=2 && !isJoin && isShow">{{ $t('course.toDetail') }}</button>
		</view>
	</view>
</template>

<script>
	import introduce from "./components/introduce.vue"
	import directory from "./components/directory.vue"
	import comments from "./components/comments.vue"
	export default {
		data() {
			return {
				tabList: ["课程介绍", "课程目录", "课程评论"],
				index: 0,
				isShow: true,
				data: {},
				num: 0,
				isJoin: true,
				id: "",
				isShow:true,
				token:""
			}
		},
		components: {
			introduce,
			directory,
			comments
		},
		onLoad(Option) {
			this.id = Option.id
			this.token = JSON.parse(uni.getStorageSync('token')).token
			this.num = Option.view
			this.isJoin = Option.isJoin == 0 && Option.canSelf == 1 ? true : false
			this.isShow = Option.canSelf == 0? false : true
		},
		onShow() {
			this.getData(this.id)
		},
		methods: {
			getData(id) {
				this.$httpRequest({
					url: "/webservice/rest/server.php?",
					method: "POST",
					data: {
						moodlewsrestformat: 'json',
						wsfunction: 'core_course_get_contents_for_app',
						courseid: id,
						wstoken: this.token,
						wsfunction: 'core_course_get_contents_for_app',
						moodlewssettingfileurl: true,
						moodlewssettingfilter: true,

					}
				}).then(res => {
					this.data = res
				})
			},
			changTab(data) {
				this.index = data.currentIndex
			},
			// 加入课程
			add() {
				 
				this.$httpRequest({
					url: "app/api/joinCourse.php",
					method: "POST",
					data: {
						service: "moodle_mobile_app",
						courseid: this.id,
						ustoken: this.token
					}
				}).then(res => {
					if (res.errorcode == 200) {
						uni.showToast({
							title: "加入成功",
							icon: "success"
						})
						this.isJoin = false
					} else {
						uni.showToast({
							title: "操作失败，请重试！",
							icon: "none"
						})
					}
				})

			},
			toDetail() {
				uni.setStorageSync('directory', JSON.stringify(this.data))
				uni.navigateTo({
					url: "/pages/courseDetail/courseDetail"
				})
			},
			toScore() {
				uni.navigateTo({
					url: "/pages/curriculumEvaluation/curriculumEvaluation?id="+this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F5F6FA;
		width: 100%;
		height: 100%;

		.tab {
			width: 100%;
			height: 80rpx;
			background-color: #FFFFFF;
			border-radius: 20rpx;
		}

		.bottom {
			position: fixed;
			width: 100%;
			height: 96rpx;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FFFFFF;

			.btn {
				width: 478rpx;
				height: 72rpx;
				background: #4DBEC1;
				color: #FFFFFF;
				line-height: 72rpx;
				text-align: center;
			}
		}
	}
</style>
